<template>
    <div class="big_picture" v-if="is_pic">
        <span class="close_picture" @click="closePicture()"></span>
        <img :src="imgSrc" alt="" class="picture_scale">
    </div>
</template>

<script>
export default {
    name: "",
    data() {
        return {
            is_pic:false,
            imgSrc:null
        };
    },
    created() {
        
    },
    methods: {
        getData(url){
            this.is_pic = true
            this.imgSrc = url
        },
        closePicture() {
            this.is_pic = false;
            this.imgSrc = "";
        },
    },
};
</script>


<style scoped>
.big_picture {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 999999;
    top: 0;
    left: 0;
}
.close_picture {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.picture_scale {
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    max-height: 100%;
    max-width: 1200px;
    margin: auto;
    z-index: 2;
}
</style>


